<template>
    <div class="login login-with-news-feed">
        <div class="news-feed">
            <div class="news-image">
                <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/bg-6.png" alt="">
            </div>
        </div>
        <div class="right-content">
            <div class="login-header">
                <div class="brand">
                    <span class="logo"></span>汇票线
                    <small>Draft Line</small>
                </div>
            </div>
            <div class="login-content">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px" @keyup.enter.native="login()">
                    <el-form-item label="用户名" prop="name">
                        <el-input v-model="ruleForm.name" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pass">
                        <el-input type="password" v-model="ruleForm.pass" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="login" style="width: 100%">登录</el-button>
                    </el-form-item>
                </el-form>
                <div class="login_right_bottom">© 2016 汇票线 版权所有</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import { Action } from 'vuex-class';
    
    @Component()
    export default class Login extends Vue {
        @Action userLogin!:Function;
        @Action getMenus!:Function;

        ruleForm = {
            name: '',
            pass: ''
        }
        rules = {
            name: [
                { required: true, message: '请输入账号', trigger: 'blur' },
                { min: 3, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
            ],
            pass: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 3, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
            ]
        }
        login() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.doLogin();
                } else {
                    return false;
                }
            });
        }
        async doLogin() {
            let res = await this.userLogin({
                username: this.ruleForm.name,
                password: this.ruleForm.pass
            });
            if (res.status == 200){
                let promise = this.getMenus();
                promise.then(resolve => {
                    this.$router.push('/platform/billcheck');
                    // this.$router.push('/sys/menu');
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .login_right_bottom {
        display: flex;
        justify-content: center;
        margin-left: 70px;
        border-top: 1px solid #ddd;
        margin-top: 35px;
        padding-top: 20px;
    }
    .login.login-with-news-feed {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .login.login-with-news-feed .news-feed {
        position: fixed;
        left: 0;
        right: 500px;
        top: 0;
        bottom: 0;
        -webkit-transform: translateZ(0);
        overflow: hidden;
    }
    .login.login-with-news-feed .news-image {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
    }
    .login.login-with-news-feed .news-image img {
        position: absolute;
        right: 0;
        top: 0;
        left: 0;
        bottom: 0;
        max-height: 100%;
        min-width: 100%;
        top: -1960px;
        bottom: -1960px;
        left: -1960px;
        right: -1960px;
        margin: auto;
    }
    .login.login-with-news-feed .right-content {
        float: right;
        width: 500px;
        margin-top: 50px;
    }
    .login.login-with-news-feed .login-content {
        width: auto;
        padding: 30px 60px;
    }
    .login .login-content {
        padding: 30px 40px;
        color: #999;
        width: 450px;
        margin: 0 auto;
    }
    .login.login-with-news-feed .login-header {
        position: relative;
        top: 0;
        margin: 0;
        left: 0;
        right: 0;
        padding: 100px 60px 0;
    }
    .login.login-with-news-feed .login-header .brand {
        color: #242a30;
    }
    .login .login-header .brand {
        padding: 0;
        font-size: 28px;
    }
    .login .login-header {
        font-weight: 300;
    }
    .navbar-logo, .coming-soon .brand .logo, .login .login-header .brand .logo {
        border: 14px solid transparent;
        border-color: #4DCACA #31A3A3 #1D8888;
        width: 28px;
        height: 28px;
        position: relative;
        font-size: 0;
        margin-right: 10px;
        top: -9px;
    }
    .login.login-with-news-feed .login-header .brand small {
        color: #707478;
    }
    .login .login-header .brand small {
        font-size: 14px;
        display: block;
    }
</style>